<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>

<html>
<head>
<%@ include file="/WEB-INF/views/include/common.jsp" %>
 <meta name="viewport" http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 80% }
      li {display:inline;}
    </style>

<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCjYzALnSN1zEr2CcvzGGwFxBylVDpFcCI&sensor=false">
      </script>
          <script type="text/javascript">
          var map;
          var selectedMarker;
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(37.397866, 126.846443),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
        
        initBinding();
      }
      
      function initBinding(){
    	  
    	  $('#move1').bind('click', function(){
    		  move1();
    	  });
    	  
    	  $('#zoom3').bind('click', function(){
  				gMapChangeZoom(13);
    	  });
    	  
		  $('#gotoAddressPosition').bind('click', function(){
			  gMapCodeAddress($('#setAddress').val());
		  });
    	  
    	  
    	  google.maps.event.addListener(map, 'click', function(event) {
    		    map.setZoom(8);
    		    
    		    gMapShowClickedPosition(event.latLng);
    		  });
      }
      var infowindow = new google.maps.InfoWindow();
      var geocoder = new google.maps.Geocoder();
      
      // 클릭된 곳에 마크와 주소 표시
      function gMapShowClickedPosition(latLng){
    	  
    	  
    	  if(selectedMarker != null){
    		  selectedMarker.setMap(null);
        	  infowindow.open(null, null);  
    	  }
    	  var address="";
    	  geocoder.geocode({'latLng': latLng}, function(results, status) {
    	      if (status == google.maps.GeocoderStatus.OK) {
    	        if (results[1]) {
//     	          map.setZoom(11);
    	          selectedMarker = new google.maps.Marker({
    	              position: latLng,
    	              map: map
    	          });
    	          infowindow.setContent(results[1].formatted_address);
    	          address=results[1].formatted_address;
    	          infowindow.open(map, selectedMarker);
    	          
    	          gMapSetAddress(address);// ajax 통신이기 때문에 이 곳에서 해야 한다.
    	        }
    	      } else {
    	        alert("Geocoder failed due to: " + status);
    	      }
    	    });
    	  
      }
      
      
      // 입력된 주소로 이동
      function gMapCodeAddress(address) {

    	  
    	  if(selectedMarker != null){
    		  selectedMarker.setMap(null);
        	  infowindow.open(null, null);  
    	  }
    	    geocoder.geocode( { 'address': address}, function(results, status) {
    	      if (status == google.maps.GeocoderStatus.OK) {
    	        map.setCenter(results[0].geometry.location);
    	        gMapShowClickedPosition(results[0].geometry.location);
    	      } else {
    	        alert("Geocode was not successful for the following reason: " + status);
    	      }
    	    });
    	  }
      
      // 주소 넣기.
      function gMapSetAddress(address){
    	  alert(address);
    	  $('#address').val(address);
      }
      
      function move1(){
    	  gMapGotoPosition(37.397866,126.846443);
      }
      
      // 지도 위치 이동하기.
      function gMapGotoPosition(lat, lng){
    	  var pos = new google.maps.LatLng(lat,
    			  lng);
			map.setCenter(pos);
    	  
      }
      
      
      //지도 줌 변경
      function gMapChangeZoom(zoom){
    	  map.setZoom(zoom);
      }
    </script>
</head>

  <body onload="initialize()">
<!--   <div id="map_canvas" style="width:100%; height:100%"></div> -->
    <div id="map_canvas" style="width:100%; height:60%"></div>
    <div>
    버튼들124
    	<ul>
    		<li>
    			<input type="button" id="move1" value="이동1"></input>
    		</li>
    		<li>
    			<input type="button" id="move1" value="이동2" onclick="gMapGotoPosition(37.597866,126.946443)"></input>
    		</li>
    	</ul>
    	<ul>
    		<li>
    			<input type="button" id="zoom1" value="줌18 자세히" onclick="gMapChangeZoom(18)"></input>
    		</li>
    		<li>
    			<input type="button" id="zoom2" value="줌1 넓게" onclick="gMapChangeZoom(8)"></input>
    		</li>
    		<li>
    			<input type="button" id="zoom3" value="줌13"></input>
    		</li>
    	</ul>
    	
    	<ul>
    		<li><span>주소 들어가는 곳</span><input type="text" id="address" readonly/>
    		</li>
    		<li><span>주소 입력하기</span><input type="text" id="setAddress" value="서울특별시 용산구 청파동3가"/><input type="button" id="gotoAddressPosition" value="변환"/></li>
    	</ul>
    </div>
  </body>
</html>


